<style>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    color:red;
}
Submenu>MenuItem{
  text-align: center;
  left:-10px;

}

</style>
<template>
    <div class="layout" style="height: 92vh;width: 13vw;">
        <Layout >

            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}" style="width: 13vw">
                    <Menu active-name="0-1" theme="light" width="13vw" :open-names="['1']">

                        <MenuItem name="0-1" @click="navigateTo('/manager')" style="text-align: center;">首页</MenuItem>

                        <Submenu name="1">
                            <template #title  style="text-align: center;left:50px">
                                <Icon type="ios-cog"></Icon>
                                系统管理
                            </template>
                            <MenuItem name="1-1" @click="navigateTo('/manager/UserManage')" style="text-align: center;">用户管理</MenuItem>
                            <MenuItem name="1-2" @click="navigateTo('/manager/RoleManage')" style="text-align: center;">角色管理</MenuItem>
                            <MenuItem name="1-3" @click="navigateTo('/manager/PermissionsManage')" style="text-align: center;">权限管理</MenuItem>
                            <MenuItem name="1-4" @click="navigateTo('/manager/LogManage')" style="text-align: center;">日志管理</MenuItem>
                            <MenuItem name="1-5" @click="navigateTo('/manager/DailyReportManage')" style="text-align: center;">日报管理</MenuItem>
                            <MenuItem name="1-6" @click="navigateTo('/manager/MessageManage')" style="text-align: center;">消息管理</MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template #title>
                                <Icon type="ios-keypad"></Icon>
                              首页管理
                            </template>
                            <MenuItem name="2-1" @click="navigateTo('/manager/CarouselManagement')" style="text-align: center;">轮播图管理</MenuItem>
                            <MenuItem name="2-2" @click="navigateTo('/manager/TeamIntroduction')" style="text-align: center;">团队简介</MenuItem>
                            <MenuItem name="2-3" @click="navigateTo('/manager/ProjectRecommendations')" style="text-align: center;">项目推荐</MenuItem>
                            <MenuItem name="2-4" @click="navigateTo('/manager/NewsDisplay')" style="text-align: center;">新闻展示</MenuItem>
                            <MenuItem name="2-5" @click="navigateTo('/manager/UserRecommendations')" style="text-align: center;">用户推荐</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                              信息管理
                            </template>
                            <MenuItem name="3-1" @click="navigateTo('/manager/ProjectInformationManagement')" style="text-align: center;" >项目信息管理</MenuItem>
                            <MenuItem name="3-2" @click="navigateTo('/manager/TeamInformationManagement')" style="text-align: center;">团队信息管理</MenuItem>
                            <MenuItem name="3-3" @click="navigateTo('/manager/NewsInformationManagement')" style="text-align: center;">新闻信息管理</MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>

            </Layout>
        </Layout>
    </div>
</template>
<script>
import {Icon, Layout, MenuItem, Sider, Submenu} from "view-ui-plus";

export default {
    components: {Sider, Icon, MenuItem, Submenu, Layout},
        methods: {
            navigateTo(path) {
                this.$router.push(path);
            }
        }

}

</script>
